<!-- 个人中心 -->
<template>
	<view class="container">
		<view class="title_box">
			<view @click="clickItem(item)" v-for="(item, i) in titleList" :key="i" style="margin-left: 30rpx;">
				<view style="position: relative;display: flex;">
					<view class="dian" v-if="handleitem==item"></view>
					<view :class="item==handleitem?'yname':'noname'">{{item}}</view>
				</view>
			</view>
		</view>

		<view class="qbzx" v-if="handleitem=='最新咨询'">
			<view v-for="(item,index) in qbList" class="xiabox">
				<view class="qzshang" @click="toZxxq(item.id)">
					<view class="shangimg"
						:style="{'background-image': 'url(https://huboshizb.bigchun.com/'+item.imgs_arr[0]+')'}">
						<!-- <view class="bj">1779</view> -->
					</view>
					<view class="qbyou">
						<view class="qztitle">{{item.title}}</view>
						<view class="qzinfo" v-if="item.status==0">待解决咨询</view>
						<view class="qzinfo success" v-if="item.status==1">已解决咨询</view>
					</view>
				</view>
			</view>
		</view>
		<view class="qbzx" v-else>
			<input @confirm="confirmInput" v-model="value" class="inp" placeholder="请输入关键词搜索" />
			<view v-for="(item,index) in qbList" class="xiabox">
				<view class="qzshang">
					<view class="shangimg2"
						:style="{'background-image': 'url(https://huboshizb.bigchun.com/'+item.imgs+')'}">
						<view class="pending" v-if="item.status==0">待解决咨询</view>
						<view class="processed" v-if="item.status==1">已解决咨询</view>
						<!--       <view class="nameicon">
		                    <image style="width: 30rpx;height: 30rpx;margin-right: 10rpx;" src="../../static/image/zx9.png"></image>
		                    <view ></view>
		                </view> -->
					</view>
					<view class="qbyou" style="padding-bottom: 20rpx;">
						<view class="qztitle">{{item.title}}</view>
						<view class="qzinfo" v-html="item.info"></view>
						<view class="qztime">{{item.createtime}}</view>
						<view class="qb-line"></view>
					</view>

				</view>
				<view class="qzxia">
					<view style="display: flex;	flex: 1;">
						<view class="dz" @click="dz(item.id)">
							<image v-if="!item.is_fabulous" style="width: 36rpx;height: 36rpx;"
								src="../../static/image/zx7.png"></image>
							<image v-else style="width: 36rpx;height: 36rpx;"
								src="../../static/image/zzh.png"></image>
							<view style="margin-left: 8rpx;">赞({{item.fabulous_sum}})</view>
						</view>
						<view class="sc" @click="sc(item.id)">
							<image v-if="!item.is_collection" style="width: 36rpx;height: 36rpx;"
								src="../../static/image/zx6.png"></image>
							<image v-else style="width: 36rpx;height: 36rpx;"
								src="../../static/image/cch.png"></image>
							
							<view style="margin-left: 8rpx;">收藏({{item.collection_sum}})</view>
						</view>
					</view>
					<view class="xq" @click="toZxxq(item.id)">
						查看详情
					</view>
				</view>
			</view>
		</view>
		<view class="searchBtn" v-if="handleitem=='最新咨询'" @click="goPage('pages/jewel/addConsult',true)">我要咨询</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				handleitem: '最新咨询',
				titleList: [
					"最新咨询", "全部咨询"
				],
				dataList: [{
						id: 0,
						name: '怎样选择红宝石呢?',
						content: '已解决咨询',
						status: '0',
						num: 1779
					},
					{
						id: 1,
						name: '冰种翡翠怎么鉴别?',
						content: '待解决咨询',
						status: '1',
						num: 1778
					},
					{
						id: 2,
						name: '怎样鉴别钻石上的瑕疵?',
						content: '已解决咨询',
						status: '0',
						num: 1777
					}
				],
				qbList: [

				],
				value: ''
			}
		},
		onLoad() {
			this.getData()
		},
		onShow() {
			this.getData()
		},
		onPullDownRefresh() {
			this.getData()
			uni.stopPullDownRefresh()
		},
		methods: {
			confirmInput(e) {
				this.value = e.detail.value
				this.getData()
			},
			toZxxq(id) {
				this.goPage('/pages/jewel/consultdetail?id=' + id)
			},
			search(res) {

			},
			clickItem(val) {
				this.handleitem = val
				this.getData()
			},
			getData() {
				let that = this
				this.$api.inquiryList({
					title: this.value
				}).then(res => {
					console.log('res', res)
					let dataList = res.data
					this.qbList = dataList
					console.log(this.qbList.imgs_arr, '22222');
					this.qbList.forEach((item, index) => {
						item.imgs_arr = item.imgs.split(',')
						if (item.createtime != null) {
							item.createtime = that.$util.tsFormatTime(item.createtime * 1000, "Y年M月D日")
						}
					})
				})
			},
			dz(id) {
				this.$api.inquiryfabulous({
					problem_id: id
				}).then(res => {
					this.$u.toast(res.msg);
					this.getData()
				})

			},
			sc(id) {

				this.$api.inquirycollection({
					problem_id: id
				}).then(res => {
					this.$u.toast(res.msg);
					this.getData()
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.container {
		height: 100vh;
		background: #f5f5f5;
		// overflow: hidden;
	}

	.box {
		height: 210rpx;
		background: #ffffff;
		border-radius: 28rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 30rpx;
		padding: 10rpx 0rpx 0rpx 10rpx;
		display: flex;
	}

	.name {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
	}

	.tel {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		margin-left: 20rpx;
	}

	.status {
		background-size: 100% 100%;
		width: 84rpx;
		height: 39rpx;
		background-image: url("/static/image/fenxiao76.png");
		color: #0eab28;
		font-size: 28rpx;
		text-align: center;
		margin-left: 20rpx;
	}

	.addr {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		margin-top: 30rpx;
	}

	.btn {
		width: 100%;
		height: 98rpx;
		background: #de2415;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;

		font-weight: bold;
	}

	.title_box {
		display: flex;
		// justify-content: space-around;
		// margin-top: 33rpx;
		padding: 30rpx 0rpx 0rpx 30rpx;
	}

	.dian {
		background-size: 100% 100%;
		width: 35rpx;
		height: 35rpx;
		background-image: url("/static/image/fenxiao26.png");
		position: absolute;
		top: -5px;
		left: -7px;
	}

	.noname {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		z-index: 9;
		// width: 100rpx;
	}

	.yname {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		// position: absolute;
		// width: 100rpx;
		left: 20rpx;
		top: 0rpx;
		z-index: 9;
	}

	.box-you {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-left: 26rpx;
	}

	.content1 {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #2bc78a;
	}

	.content2 {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #ff8a00;
	}

	.num {
		width: 72rpx;
		height: 40rpx;
		background: #de2415;
		box-shadow: 0rpx 0rpx 9rpx 0rpx rgba(175, 21, 21, 0.8);
		border-radius: 24rpx 16rpx 16rpx 0rpx;
		position: absolute;
		z-index: 1;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	// /deep/ .uni-searchbar__box {
	// 	border-radius: 28px !important;
	// }
	// /deep/ .uni-searchbar__box-icon-search {
	// 	display: none;
	// }
	// /deep/ .uni-searchbar__text-placeholder {
	// 	position: absolute;
	// 	left: 20rpx;
	// }
	.qbzx {
		margin-left: 30rpx;
		margin-right: 30rpx;
		// height: 80%;
		overflow: scroll;
		padding-bottom: 100upx;
	}

	.qzshang {
		display: flex;
		width: 100%;
		padding: 20rpx;
		padding-bottom: 0;
	}

	.shangimg {
		position: relative;
		width: 205rpx;
		height: 192rpx;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		border-radius: 20px;
	}

	.shangimg2 {
		position: relative;
		width: 205rpx;
		height: 192rpx;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		border-radius: 20px;
	}

	.qbyou {
		width: 65%;
		display: flex;
		flex-direction: column;
		margin-left: 24rpx;
		justify-content: space-between;
	}

	.qb-line {
		width: 100%;
		height: 1rpx;
		background-color: #f2f2f2;
		margin-top: 10rpx;
	}

	.qztitle {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
		// line-height: 29px;
	}

	.qztime {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #cccccc;
		text-align: right;
	}

	.qzinfo {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 29px;
		color: #999999;

		// height: 100upx;
		width: 400upx;


		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		// text-align: justify;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.xq {
		background-size: 100% 100%;
		width: 150rpx;
		height: 54rpx;
		background-image: url("/static/image/zx8.png");
		font-size: 28rpx;
		color: #de2415;
		line-height: 56rpx;
		text-align: center;
	}

	.qzxia {
		display: flex;
		align-items: center;
		margin: 0 30rpx;
		padding-bottom: 20rpx;
	}

	.dz {
		display: flex;
		font-size: 24rpx;
		color: #acacac;
	}

	.sc {
		display: flex;
		font-size: 24rpx;
		color: #acacac;
		margin-left: 20rpx;
	}

	.inp {
		height: 79rpx;
		background: #e8e8e8;
		border-radius: 40rpx;
		padding-left: 20rpx;
		margin-top: 36rpx;
	}

	.xiabox {
		background: #ffffff;
		margin-top: 27rpx;
		border-radius: 20px;
	}

	.nameicon {
		height: 48rpx;
		background: #000000;
		color: #ffffff;
		opacity: 0.48;
		font-size: 22rpx;
		border-radius: 0px 0px 40rpx 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bj {
		background-size: 100% 100%;
		font-size: 25rpx;
		line-height: 30px;
		color: #ffffff;
		text-align: center;
		width: 55px;
		height: 30px;
		background: #de2415;
		box-shadow: 0px 0px 9px 0px rgba(175, 21, 21, 0.8);
		background-color: #de2415;
		border-radius: 20px 16px 16px 0px;
	}

	.success {
		color: #2bc78a;
	}

	.pending {
		color: #ff8a00;
	}

	.pending {
		background-size: 100% 100%;
		font-size: 20rpx;
		line-height: 42rpx;
		color: #ffffff;
		text-align: center;
		width: 150rpx;
		height: 42rpx;
		background-color: #ff8a00;
		border-radius: 20px 16px 16px 0px;
	}

	.processed {
		background-size: 100% 100%;
		font-size: 20rpx;
		line-height: 42rpx;
		color: #ffffff;
		text-align: center;
		width: 150rpx;
		height: 42rpx;
		background-color: #2bc78a;
		border-radius: 20px 16px 16px 0px;
	}

	.bjname {
		font-size: 22rpx;
		color: #ffffff;
		opacity: 0.42;
	}

	.searchBtn {
		// width: 280rpx;
		position: fixed;
		width: 100%;
		bottom: 0px;
		height: 78rpx;
		background: #de2415;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		line-height: 75rpx;
		color: #ffffff;
		font-weight: bold;
		font-size: 30rpx;
		text-align: center;
		// margin: 50rpx auto;
	}
</style>